import React, { Component} from 'react'


const MyContext = React.createContext();
const {Provider,Comsumer} = MyContext;

export default class A extends Component {

  state = {username:'tom',age:18}
  render() {
    const {username,age} = this .state;
    return (
      <div>
        <h3>我是A组件</h3>
        <h4>我的用户名是:{username}</h4>
        <Provider value={{username:username,age:age}}>
            <B/>
        </Provider>
      </div>
    )
  }
}


class B extends Component {
    render() {
      return (
        <div>
            <h4>我是B组件</h4>
            <C/>
        </div>
      )
    }
  }
  

  class C extends Component {
    //申明接受context
    static contextType = MyContext;
    render() {
      return (
        <div>
            <h3>我是B组件</h3>
            <h4>我从a组件来的用户名是:{this.context.username}</h4>
            <h4>我从a组件来的年龄是:{this.context.age}</h4>
        </div>
      )
    }
  }
  
// function C(){
//     return (
//         <div>
//             <h3>我是C组件</h3>
//             <h4>我从a组件来的用户名是:
//                 <Comsumer>
//                     console.log(value)
//                     {/* {value => `${value.username},年龄是${value.age}}`} */}
//                 </Comsumer>
//             </h4>
//         </div>
//     )
// }
